<!--
 * @Author: xiaxia
 * @Description: 
 * @Date: 2024-06-24 16:38:54
 * @LastEditTime: 2024-07-03 16:07:16
 * @FilePath: \project\src\views\product\sku\index.vue
-->
<template>
  <div>
    <el-card>
      <el-table :data="skuList" border>
        <el-table-column label="序号" type="index" width="60" align="center" />
        <el-table-column prop="skuName" label="名称" min-width="180" show-overflow-tooltip />
        <el-table-column prop="skuDesc" label="描述" min-width="220" show-overflow-tooltip />
        <el-table-column prop="skuDefaultImg" label="默认图片" width="150">
          <template #="{row}">
            <img :src="row.skuDefaultImg" alt="" style="width: 120px;height: 100px;">
          </template>
        </el-table-column>
        <el-table-column prop="weight" label="重量(g)" width="100" />
        <el-table-column prop="price" label="价格(元)" width="100" />
        <el-table-column fixed="right" label="操作" width="220">
          <template #="{row}">
            <el-button 
              :type="row.isSale==0?'primary':'info'" 
              size="small" 
              :icon="row.isSale==0?'top':'Bottom'"
              @click="upDateSale(row)"
            ></el-button>
            <el-button size="small" icon="edit" @click="editSku"></el-button>
            <el-button type="info" size="small" icon="view" @click="getSkuDetail(row)"></el-button>
            <el-popconfirm
              width="220"
              confirm-button-text="确认"
              cancel-button-text="取消"
              icon="InfoFilled"
              :title="`确认删除${row.skuName}这个SKU吗?`"
              @confirm="hDeleteSku(row.id)"
            >
              <template #reference>
                <el-button type="danger" icon="delete" size="small"></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3, 5, 10]"
        background
        layout="prev, pager, next, jumper,->,sizes, total"
        :total="total"
        @size-change="hSizeChange"
        @current-change="getSkuList"
        style="margin-top: 10px"
      />

      <!-- 抽屉 商品详情 -->
      <el-drawer
        class="skuDetial"
        v-model="showDetail"
        title="查看商品详情"
        direction="rtl"
      >
        <el-row>
          <el-col :span="6">名称</el-col>
          <el-col :span="18">{{ skuDetail.skuName }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6">描述</el-col>
          <el-col :span="18">{{ skuDetail.skuDesc }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6">价格</el-col>
          <el-col :span="18">{{ skuDetail.price }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6">平台属性</el-col>
          <el-col :span="18">
            <el-tag type="primary" v-for="item in skuDetail.skuAttrValueList" :key="item.id">{{ item.attrName }}</el-tag>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">销售属性</el-col>
          <el-col :span="18">
            <el-tag type="primary" v-for="item in skuDetail.skuSaleAttrValueList" :key="item.id">{{ item.saleAttrName }}</el-tag>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">商品图片</el-col>
          <el-col :span="18">
            <el-carousel :interval="3000" type="card" height="200px">
              <el-carousel-item v-for="item in skuDetail.skuImageList" :key="item.id">
                <img :src="item.imgUrl" alt="" style="width: 100%;height: 100%;">
                <!-- <h3 text="2xl" justify="center">{{ item }}</h3> -->
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </el-drawer>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { reqSkuLits, reqOnSale, reqCancleSale, reqSkuDetail, reqSkuDelete } from '@/api/product/sku';
import { SkuLitsRespones, SkuInfo } from '@/api/product/sku/type';
import { ElMessage } from 'element-plus';

let currentPage = ref<number>(1)
let pageSize = ref<number>(5)
let total = ref<number>(0)
let skuList = ref<any>([])
let showDetail = ref<boolean>(false) // 详情
let skuDetail= ref<SkuInfo>({}) // sku详细信息

const getSkuList = async (page=1)=>{
  currentPage.value = page
  const res:SkuLitsRespones = await reqSkuLits(currentPage.value, pageSize.value)
  if(res.code!=200) return
  skuList.value = res.data.records
  total.value = res.data.total
}
onMounted(()=>{
  getSkuList()
})
const hSizeChange =()=>{
  getSkuList()
}

// 上架下架
const upDateSale = async (row:SkuInfo)=>{
  if(row.isSale==1) { // 上架-->下架
    await reqCancleSale((row.id as number))
    ElMessage({type: 'success',message: '下架成功'})
  } else { // 下架-->上架
    await reqOnSale((row.id as number))
    ElMessage({type: 'success',message: '上架成功'})
  }
  getSkuList(currentPage.value)
}
// 编辑sku
const editSku = ()=>{
  ElMessage({type: 'success',message: '系统维护中...'})
}
// 查看sku详情
const getSkuDetail = async (row:SkuInfo)=>{
  const res = await reqSkuDetail((row.id as number))
  skuDetail.value =res.data
  showDetail.value = true
}
// 删除sku
const hDeleteSku = async (id:number)=>{
  const res = await reqSkuDelete(id)
  if(res.code!=200) return ElMessage({type: 'error',message: '删除失败!'+res.data})
  ElMessage({type: 'success',message: '删除成功!'})
  getSkuList(skuList.value.length>1?currentPage.value:currentPage.value-1)
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-drawer__body {
    .el-row{
      margin-bottom: 15px;
    }

    .el-tag{
      margin-right: 10px;
    }
  }
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>